<template>
    <div id="MyTag">
        <div class="my-tag">
            <input v-if="xianyin" v-focus @blur="yinFun" :value="value" @keyup.enter="yinFun" class="input" type="text"
                placeholder="输入标签" />
            <div v-else @dblclick="dbFun" class="text">{{ value }}</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            xianyin: false,
        }
    },
    props: ['value'],
    methods: {
        dbFun() {
            this.xianyin = true;
        },
        yinFun(e) {
            this.$emit('input', e.target.value)
            this.xianyin = false;
        }
    }
}
</script>

<style lang="less" scoped>
.my-tag {
    cursor: pointer;

    .input {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        width: 100px;
        height: 40px;
        box-sizing: border-box;
        padding: 10px;
        color: #666;

        &::placeholder {
            color: #666;
        }
    }
}
</style>